<template>
  <el-card class="overview-card">
    <template #header>
      <h1>学校信息概览</h1>
    </template>
    <div class="info-container">
      <el-card class="info-item" shadow="always">
        <h2>课程数量</h2>
        <p>{{ courseCount }} 门</p>
      </el-card>
      <el-card class="info-item" shadow="always">
        <h2>教师数量</h2>
        <p>{{ teacherCount }} 位</p>
      </el-card>
      <el-card class="info-item" shadow="always">
        <h2>在籍学生数量</h2>
        <p>{{ studentCount }} 位</p>
      </el-card>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 模拟数据，实际中应从 API 获取
const courseCount = ref(100);
const teacherCount = ref(50);
const studentCount = ref(1000);

onMounted(() => {
  // 这里可以编写从 API 获取数据的逻辑，例如：
  // axios.get('/api/courses/count').then(response => {
  //   courseCount.value = response.data.count;
  // });
  // axios.get('/api/teachers/count').then(response => {
  //   teacherCount.value = response.data.count;
  // });
  // axios.get('/api/students/count').then(response => {
  //   studentCount.value = response.data.count;
  // });
});
</script>

<style scoped>
.overview-card {
  width: 100%;
  padding: 20px;
}

.info-container {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.info-item {
  width: 30%;
  text-align: center;
  padding: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
</style>